<script setup lang="ts">
// 模拟 8 组下拉框数据
import { reactive } from 'vue'
const selectList = reactive(
  Array.from({ length: 8 }, (_, i) => ({
    value: '',
    options: [
      { label: `选项${i + 1}-A`, value: `${i}-a` },
      { label: `选项${i + 1}-B`, value: `${i}-b` },
      { label: `选项${i + 1}-C`, value: `${i}-c` }
    ]
  }))
)
</script>

<template>
  <el-card class="ud-card" shadow="hover">
    <!-- 横向滚动容器 -->
    <div class="attr_select-wrapper">
      <el-select
        v-for="(item, idx) in selectList"
        :key="idx"
        v-model="item.value"
        placeholder="请选择"
        class="attr_select-item"
      >
        <el-option
          v-for="opt in item.options"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        />
      </el-select>
    </div>
  </el-card>
</template>

<style scoped>
/* 属性筛选 */
.ud-card {
  max-width: 1200px;
  margin: 0 auto; /* 卡片居中 */
}
/* 关键：把 body 的 padding 改成 5px */
.ud-card :deep(.el-card__body) {
  padding: 5px;
}
/* 关键：横向滚动 */
.attr_select-wrapper {
  display: flex;
  gap: 1px; /* 下拉框间距 */
  overflow-x: auto; /* 超出时出现横向滚动条 */
  padding-bottom: 1px; /* 给滚动条留点空间 */
  scrollbar-width: none;
  justify-content: flex-start; /* 关键：左对齐 */
}
.attr_select-wrapper::-webkit-scrollbar {
  display: none;
}

.attr_select-item {
  flex: 0 0 120px; /* 不允许被压缩，最小宽度 120px */
}
</style>
